<template>
    <div class="shop">
      
        <el-row>
          <el-col :span="2">
            <!-- <el-button
              size="mini"
              type="primary"
              @click="exportWoodsStore"
              >导出数据</el-button
            > -->
          </el-col>
          <el-col :span="22">
            <el-form :inline="true" size="mini" :model="form" class="form">
            <el-form-item label="提交时间:">
              <el-date-picker
                v-model="form.beginTime"
                type="date"
                style="width: 136px"
                value-format="yyyy-MM-dd"
                placeholder="选择开始时间"
              ></el-date-picker
              >~
              <el-date-picker
                v-model="form.endTime"
                type="date"
                style="width: 136px"
                value-format="yyyy-MM-dd"
                placeholder="选择结束时间"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
            <span style="margin-top: 4px; color: #666; margin-right: 8px"
            >结算状态</span
          >
          <el-select
            v-model="form.orderStatus"
            size="mini"
            filterable
          >
          <el-option :value="0" label="请选择"></el-option>
          <el-option :value="1" label="待支付"></el-option>
            <el-option :value="5" label="已支付待核销"></el-option>
            <el-option :value="10" label="已核销（已完成）"></el-option>
            <el-option :value="15" label="已取消（订单未支付）"></el-option>
            <el-option :value="20" label="已失效（关闭）"></el-option>
          </el-select>
        </el-form-item>
            <!-- <el-input
              style="float: right; width: 164px; margin-top: 20px"
              size="mini"
              placeholder="所属小店"
              v-model="shop_user_mobile"
            ></el-input> -->
            <!-- <el-form-item>
              <span style="margin-top: 4px; color: #666; margin-right: 8px"
              >收益类型</span
            >
            <el-select
            
            v-model="form.orderType"
            size="mini"
            filterable
          >
          <el-option :value="0" label="请选择"></el-option>
            <el-option :value="5" label="小店商品"></el-option>
            <el-option :value="20" label="红包充值"></el-option>
            <el-option :value="6" label="平台商品"></el-option>
            <el-option :value="4" label="优惠买单"></el-option>
          </el-select>
          </el-form-item> -->
              <el-button
        
              size="mini"
              type="primary"
              @click="searchArea"
              >搜索</el-button
            >
          </el-form>
          </el-col>
        </el-row>
      
      
     
      <el-table
        :data="tableData"
        style="width: 100%; margin: 40px 0"
        max-height="680"
        :cell-style="tc"
        :header-cell-style="tccolor"
      >
        <el-table-column label="创建时间" prop="createdAt"></el-table-column>
        <!-- <el-table-column label="收益类型" prop="commissionStatusText"> -->
          <!-- <template slot-scope="scope">
            <p v-if="scope.row.order_type == 50">红包充值</p>
            <p v-if="scope.row.order_type == 31">红包充值间接返利</p>
            <p v-if="scope.row.order_type == 30">会员费</p>
            <p v-if="scope.row.order_type == 20">优惠买单</p>
          </template> -->
        <!-- </el-table-column> -->
        <el-table-column
          label="交易金额（元）"
          prop="actualAmount"
        ></el-table-column>
        <!-- <el-table-column
          label="预估收益（元）"
          prop="estimate_revenue"
        ></el-table-column> -->
        <el-table-column label="订单号" prop="orderNo"></el-table-column>
        <el-table-column label="所属小店" prop="memberName">
          <!-- <template slot-scope="scope"
            >{{ scope.row.shop_name }}丨{{ scope.row.shop_user_mobile }}</template
          > -->
        </el-table-column>
        <el-table-column
          label="购买用户"
          prop="payMethodName"
        ></el-table-column>
        <el-table-column label="结算状态" prop="inText">
          <!-- <template slot-scope="scope">
            <p v-if="scope.row.status == 0">待结算</p>
            <p v-if="scope.row.status == 1">已结算</p>
            <p v-if="scope.row.status == 2">已失效</p>
            <p v-if="scope.row.status == 3">已冻结</p>
          </template>-->
        </el-table-column>
      </el-table>
  
      <div class="pagination">
        <div class="record">
          <span>已结算收益：￥{{ settled_income }}</span
          >,
          <span>未结算预估收益:￥{{ unsettled_income }}</span>
        </div>
  
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="form.pageNum"
          :page-size="form.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
          style="display: inline-block"
        ></el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import { redPacketsOrders } from "@/api/area.js";
  // import { ServiceListSearch, ServiceAllNumSearch } from "@/api/service.js";
  import { API_BASE_URL } from "@/config";
  export default {
    data() {
      return {
        //合伙人服务商id
        uid: "",
        tableData: [],
        page: 1,
        size: 20,
        total: 0,
        shop_user_mobile: "",
        status: "",
        order_type: "",
   
        form: {
          /** start_time: "",
          end_time: "",
          */
          /**
           * 订单创建开始时间
           */
          beginTime: "",
          /**
           * 订单创建结束时间
           */
          endTime: "",
          /**
           * 搜索
           */
          keyword: "",
          /**
           * 购买用户账号
           */
          mobile: "",
          /**
           * 订单编号
           */
          orderNo: "",
          /**
           * 订单状态 1待支付 5：已支付待核销 10：已核销（已完成）15：已取消（订单未支付）20：已失效（关闭）
           */
          orderStatus: 0,
          /**
           * 订单类型（收益类型） 4小店买单（优惠买单） 5小店商品 20红包充值 6平台商品
           */
          orderType: 0,
          pageNum: 1,
          pageSize: 20,
          /**
           * 合伙人id
           */
          partnerId: 0,
          /**
           * 分销平台
           * TAOBAO :TAOBAO
           * JDCOM :JDCOM
           * PINDUODUO :PINDUODUO
           * VIPSHOP :VIPSHOP
           */
          platform: 0,
          /**
           * 小店id
           */
          sellerId: 0,
          /**
           * 服务经理账号
           */
          serviceMobile: "",
        },
        // 已结算收益
        settled_income: "",
        // 未结算收益
        unsettled_income: "",
      };
    },
    mounted() {
      this.uid = this.$route.query.serviceId;
      this.form.partnerId = this.$route.query.serviceId;
      this.form.orderType = this.$route.query.orderType
      console.log(this.uid);
      if (this.uid) {
        this.staffListSearchData();
        //this.ServiceAllNumSearch();
      }
    },
    methods: {
      //查看管理小店
      watchTotalShop(id) {
        console.log(id);
      },
      //权限详情
      watchManagentDetail(id) {
        console.log(id);
      },
      // 搜索
      searchArea() {
        this.page = 1;
        this.staffListSearchData();
        this.ServiceAllNumSearch();
      },
      // 获取收益总数
      async ServiceAllNumSearch() {
        var url =
          "?uid=" +
          this.uid +
          "&order_type=" +
          this.order_type +
          "&status=" +
          this.status;
        let res = await ServiceAllNumSearch(url);
        if (res.code == 10000) {
          this.unsettled_income = res.data.unsettle_revenue;
          this.settled_income = res.data.settle_revenue;
        }
      },
      //获取列表数据
      async staffListSearchData() {
         var url =
          "?uid=" +
          this.uid +
          "&page=" +
          this.page +
          "&size=" +
          this.size +
          "&shop_user_mobile=" +
          this.shop_user_mobile +
          "&order_type=" +
          this.order_type +
          "&status=" +
          this.status +
          "&start_time=" +
          this.form.start_time +
          "&end_time=" +
          this.form.end_time;
        let res = await redPacketsOrders(this.form);
        if (res.code === 200) {
          this.export = res.data;
          this.tableData = res.data.list;
          this.total = res.data.total;
        } else {
          this.$message.error(res.message);
        }
      },
      // 导出仓库
      exportWoodsStore() {
        window.open(
          `${API_BASE_URL}/admin/download/zip/${this.export.download_token}`
        );
        return;
      },
      pageChange(page) {
        this.form.pageNum = page;
        this.staffListSearchData();
      },
      tc() {
        return "text-align:center; color:#333333; font-size:12px;";
      },
      tccolor() {
        return "text-align:center;background-color:#f5f5f5; font-size:14px;";
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .shop {
    padding: 20px;
    .pagination {
      float: right;
      margin-bottom: 20px;
    }
    .record {
      display: inline-block;
      position: relative;
      top: 5px;
      right: 30px;
    }
  }
  .forms {
    position: relative;
    top: 19px;
    float: right;
  }
  </style>
  